<template>
  <div class="main-content" style="width: 60%">
    <div class="card">
      <div style="margin-bottom: 20px; font-size: 22px; font-weight: bold; text-align: center">{{news.title }}</div>
      <div style="color: #666; text-align: center">
        <span style="margin-right: 20px">发布时间：{{ news.time }}</span>
        <span>浏览量：<span style="color: red">{{ news.count }}</span></span>
      </div>
      <div style="margin: 30px 0; padding: 0 20px">
        <div class="w-e-text" style="line-height: 26px; text-indent: 2rem">
          <div v-html="news.content"></div>
        </div>
      </div>
    </div>

    <Comment :fid="id" module="news" />

  </div>
</template>

<script>
import Comment from "@/components/Comment"
export default {
  name: "NewsDetail",
  components: {Comment},
  data() {
    return {
      id: this.$route.query.id,
      news: {},
      commentCount: 0,
      form: {},
      commentList: [],
      user: JSON.parse(localStorage.getItem('xm-user') || '{}')
    }
  },
  created() {
    this.$request.put('/news/updateCount/' + this.id).then(res => {
      this.load()
    })
    this.loadComment()
  },
  methods: {
    del(id) {   // 单个删除
      this.$confirm('您确定删除吗？', '确认删除', {type: "warning"}).then(response => {
        this.$request.delete('/comment/deepDelete/' + id).then(res => {
          if (res.code === '200') {   // 表示操作成功
            this.$message.success('操作成功')
            this.loadComment()
          } else {
            this.$message.error(res.msg)  // 弹出错误的信息
          }
        })
      }).catch(() => {
      })
    },
    handleReply(comment) {
      this.$set(comment, 'showReply',  !comment.showReply)
    },
    addComment(pComment) { // pComment表示父级的评论对象
      this.form.module = 'news'
      this.form.fid = this.id
      this.form.userId = this.user.id
      if (pComment) { // 表示回复
        this.form.pid = pComment.pid
        this.form.content = pComment.reply
      }
      this.$request.post('/comment/add',this.form).then(res =>{
        if (res.code == '200') {
          this.$message.success('操作成功')
          this.form = {}
          this.loadComment()
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    loadComment() {
      this.$request.get('/comment/selectTree/' + this.id + '/news').then(res => {
        this.commentList = res.data || []
      })

      this.$request.get('/comment/selectCount/' + this.id + '/news').then(res => {
        this.commentCount = res.data || 0
      })
    },
    load() {
      this.$request.get('/news/selectById/' + this.id).then(res => {
        this.news = res.data || {}
      })
    }
  }
}
</script>

<style scoped>
.highLight {
  color: #2A60C9;
}
</style>